<template>
  <div>

    <el-table
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column
        :label="$t('#')"
        prop="index"
        align="center"
        width="50"
      />
      <el-table-column label="字段备注" width="240px">
        <template slot-scope="scope">
          <el-form-item>
            <el-input
              v-model="scope.row.dbFieldTxt"
              disabled
            /> </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="字段名称" width="240px">
        <template slot-scope="scope">
          <el-form-item>
            <el-input
              v-model="scope.row.dbFieldName"
              disabled
            /> </el-form-item></template>
      </el-table-column>
      <el-table-column label="主表名称" width="240px">
        <template slot-scope="scope">
          <el-form-item>
            <!-- <el-input
              v-model="scope.row.mainTable"
              placeholder="表名不要写错"
              :disabled="scope.row.dbFieldName == 'id'"
            /> -->
            <el-select
              v-model="scope.row.mainTable"
              :clearable="true"
              filterable
              placeholder="请选择"
              :disabled="scope.row.dbFieldName == 'id'"
              @change="getFieldName(scope.row)"
            >
              <el-option
                v-for="item in masterTableName"
                :key="item.tableName"
                :label="item.tableName"
                :value="item.tableName"
              />
            </el-select>

          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="主表字段">
        <template slot-scope="scope">
          <el-form-item style="width:240px">
            <!-- <el-input
              v-model="scope.row.mainField"
              placeholder="字段名不要写错"
              :disabled="scope.row.dbFieldName == 'id'"
            /> -->
            <el-select
              v-model="scope.row.mainField"
              :clearable="true"
              placeholder="请选择"
              filterable
              :disabled="scope.row.dbFieldName == 'id'"
            >
              <el-option
                v-for="item in scope.row.fieldNameList"
                :key="item.id"
                :label="item.dbFieldName"
                :value="item.dbFieldName"
              />
            </el-select>
          </el-form-item>
        </template>
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { queryMasterTable } from '@/api/system/desform/onlineForm/onlCgformHead'

export default {
   data() {
     return {
          i: 1,
          btnDis: true,
          multipleTable: [],
          tableData: [],
          masterTableName: [],
          fieldNameList: []
     }
   },
  computed: {
    ...mapState('dbAbout', ['dbPropertyList', 'indexMemory'])

  },
   watch: {
    indexMemory: {
      handler() {
          const { newIndex, oldIndex } = this.indexMemory
          const currRow = this.tableData.splice(oldIndex, 1)[0]
          this.tableData.splice(newIndex, 0, currRow)
          let i = 1
          this.tableData.forEach(e => { e.index = i++ })
        }
     },
    dbPropertyList: {
     handler() {
     this.wrapperData()
       this.getTableName()
    },
    deep: true
    }
  },
   created() {
       this.wrapperData()
       this.getTableName()
   },
   methods: {
   // 封装成这个表单需要的数据
     wrapperData() {
      this.tableData = []
      this.dbPropertyList.forEach(e => {
        const obj = {
           'index': (e.index),
           'dbFieldName': e.dbFieldName,
           'dbFieldTxt': e.dbFieldTxt,
           'mainTable': e.mainTable || '',
           'mainField': e.mainField || '',
           'fieldNameList': []
        }
          this.tableData.push(obj)
        })
     },
     getTableName() {
      queryMasterTable('').then(response => {
          this.masterTableName = response.data
      })
     },
      getFieldName(row) {
        const name = row.mainTable
      queryMasterTable(name).then(response => {
          row.fieldNameList = response.data
          this.$forceUpdate()
      })
     }
  }
}
</script>

<style scoped>
.buttons {
  margin-bottom: 10px;
}
/* 修改行的最小高度 */
.dataForm .el-row .el-form-item {
  min-height: 0px;
}
</style>
